<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="jbg4 jbg4-full">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>jbgallery 4.0 mockup</title>
    <meta name="author" content="Massimiliano Balestrieri" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<!--
	goals:
	1) image centered 
	2) size original
	
	3) size centered after fix height/width
	4) test trivial slider
	
	test (latest version : firefox 5 - ie9 - chrome 12):
	chrome, ff, ie9, ie8
	
	ko : ie7 - OK after fix image size
	
-->	    
    <style type="text/css">
html.jbg4-full, 
html.jbg4-full body
{
	width:100%;
	height:100%; 
	margin:0;
	padding:0px;
	overflow:hidden;
}
html.jbg4-full, 
html.jbg4-full body,
.jbgallery
{
	background:#000;
}
/*slider*/
.jbg4-sld .jbg4-img{
	float:left;
	text-align:center;
}
.jbg4-img img{
	margin:0 auto;
	vertical-align:middle;
}

/*01 - slider*/
.jbg4-sld{
	width:10000px;
	position: relative;
}
.jbg4-sld .jbg4-ptv{
	position:absolute;
}
    </style>
   	<script type="text/javascript">
$(document).ready(function(){
	var _fullscreen = true;
	var that = $('.jbgallery');
	var _images = $('.jbg4-img');
	var _cnt = _fullscreen ? 'body' : that;
	var _bw = $(_cnt).width();
	var _bh = $(_cnt).height();
	
	//fullscreen - centered
	$(that).css({
		"height":_bh,
		"width":_bw,
		"line-height":_bh + 'px'//vertical align image
	});

	$(_images).css({
		"width":_bw
	});
	
	//fix image
	var _style = 'centered';
	function _get_dimensions(img) {

		var _pm = _bw / _bh;
		var _p = img.width / img.height;
		var _ret = {
			bw : _bw,
			bh : _bh,
			pm : _pm,
			p : _p,
			h : img.height,
			w : img.width
		};
		_img = null;
		return _ret;
	}
	function _fix(img) {
		var _img = img.get(0);
		var _f = _style == 'zoom' ? _fix_zoom : _fit_to_box;
		if (false) {//options.ie6 || options.ie7
			setTimeout( function() {
				_f(_img)
			}, 10);
		} else {
			_f(_img);
		}
	}
	function _fit_to_box(img) {
		$(img).width("auto").height("auto");
		var _dim = _get_dimensions(img), _force;
		if (_style == 'original' && _dim.bw >= _dim.w && _dim.bh >= _dim.h)
			return false;
		if(_dim.bw < _dim.bh) {//portrait
			var _ih = _dim.h * _dim.bw / _dim.w;
			if(_force = _ih > _dim.bh) {
				var _iw = _dim.w * _dim.bh / _dim.h;
				_width(_iw, _dim, _force);//original 200x2000
			} else {
				_width(_dim.bw, _dim);
			}
		} else {//landscape
			var _iw = _dim.w * _dim.bh / _dim.h;
			if(_force = _iw > _dim.bw) {
				var _ih = _dim.h * _dim.bw / _dim.w;
				_heigth(_ih, _dim, _force);//original 2000x200
			} else {
				_heigth(_dim.bh, _dim);
			}
		}
	}
	function _heigth(nh, dim, force) {
		if(force || _style == 'centered' || dim.bh < dim.h)
			target.height(nh);
	}
	var target;
	$('.jbg4-img').each( function() {
		target = $('img', this);
		_fix(target);
	});
	
	//01 - slider
	var _current = 0;
	function _left(){
		_current--;
		_animate();
	}
	function _right(){
		_current++;
		_animate();
	}
	function _animate(){
		$(".jbg4-ptv").animate({left : -(_bw * _current)});
	}
	
	function _onkeydown(e){
	    var _keycode = e.which || e.keyCode;
	    switch(_keycode){
	        case 37:
	            _left();
	            return false;
	        break;
	        case 39:
	            _right();
	           return false;
	        break;
	    }
	}
	$(document).bind("keydown.jbgallery", _onkeydown);
});   		
   	</script>
    </head>    
<body>
<div class="jbgallery jbg4-cnt">
	<div class="jbg4-sld">
		<div class="jbg4-ptv">
			<div class="jbg4-img">
				<img class="jbg-cur" alt="1000x769" src="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnmWII_wI/AAAAAAAABaQ/Gemk2bH539A/d/test-1000x749.jpg" />
			</div>
			<div class="jbg4-img">
				<img alt="3000x2000" src="http://lh3.ggpht.com/_JJJpzXdPAI4/TQtnm9j0rBI/AAAAAAAABag/y_OSyw3xU8c/d/test-3000x2000.jpg" />
			</div>
			
			<div class="jbg4-img"><img alt="2000x3000" src="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnmtVzOeI/AAAAAAAABac/RPFdDLFmnvo/d/test-2000x3000.jpg" /></div>
	        <div class="jbg4-img"><img alt="3000x3000" src="http://lh3.ggpht.com/_JJJpzXdPAI4/TQtnqwLok0I/AAAAAAAABak/Qnpyb_afUf0/d/test-3000x3000.jpg" /></div>
	        
	        <div class="jbg4-img"><img alt="200x2000" src="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtndIg-TeI/AAAAAAAABaI/JRhhMTO4dzw/d/test-200x2000.jpg" /></div>
	        <div class="jbg4-img"><img alt="300x200" src="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtndB11d8I/AAAAAAAABaM/4oKpCu-4xgo/d/test-300x200.jpg" /></div>
	        <div class="jbg4-img"><img alt="200x300" src="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtndKJSTAI/AAAAAAAABaE/5bqlbxZrhr0/d/test-200x300.jpg" /></div>
	        <div class="jbg4-img"><img alt="200x200" src="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtndKJSTAI/AAAAAAAABaE/5bqlbxZrhr0/d/test-200x200.jpg" /></div>
	        <div class="jbg4-img"><img alt="1x1" src="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnczX2sYI/AAAAAAAABZ8/x9w4pAbhUVI/d/test-1x1.jpg" /></div>
		</div>
		
		
	</div>
</div>
</body>
</html>